<template>
	<view>
		<view class="uQRCode">
			<view>核销码：WEX6558230</view>
			<view>
				<u-qrcode ref="qr" canvas-id="qr" value="https://uqrcode.cn/doc" size="200" @click="remake"
					@complete="complete($event)"></u-qrcode>
			</view>


		</view>
		<uni-card title="订单信息" :is-full="true" spacing="0">
			<view style="position: relative;">
				订单编号：244259026538
				<view class="minTag" :style="{color:statusColor[0]}">
					{{status[0]}}
				</view>
			</view>
			<view>服务项目：车辆保养</view>
			<view>服务门店：大宝车辆维修店</view>
			<view>下单时间：2022-20-20 12:09</view>
			<view>预约时间：2022-20-20 12:09</view>
			<view style="display: flex;">车辆：<view style="text-indent: 2em;">奔驰FWE4/豫A98FHJ</view>
			</view>
			<view style="display: flex;">备注：<view style="text-indent: 2em;">奔驰FWE4/豫A98FHJ</view>
			</view>
		</uni-card>
		<uni-card title="订单详情" :is-full="true" spacing="0">
			<view class="orderDetails">
				<view>车辆精洗</view>
				<view>￥199</view>
			</view>
			<view class="orderDetails">
				<view>车辆附加费用</view>
				<view>￥199</view>
			</view>
		</uni-card>
		<uni-card :is-full="true" spacing="0">
			<view class="orderDetails">
				<view>原价</view>
				<view>￥199</view>
			</view>
			<view class="orderDetails">
				<view>优惠</view>
				<view style="color: red;">-￥10</view>
			</view>
			<view class="line">

			</view>
			<view class="orderDetails">
				<view>支付金额</view>
				<view>￥200</view>
			</view>
		</uni-card>
		<uni-card title="评价结果" :is-full="true" spacing="0">
			<view>评价时间：2022-20-20 12:09</view>
			<view style="display: flex;">
				评分：<uni-rate v-model="rateValue" @change="onChange" />
			</view>
			<view>评价结果：大宝车辆维修店</view>
			<view>评语：</view>

		</uni-card>

		<view style="height:300rpx;">
			
		</view>

		<view class="bottomNav">
			<view>
				<image src="@/static/kefu.png" mode=""></image>
				<view>联系客服</view>
			</view>
			<button class="btn1" v-if="orderStatus==1" @click="toComment">立即评价</button>
			<button class="btn2" v-if="orderStatus==1">再来一单</button>
			<button class="btn2" v-if="orderStatus==2" @click="toCancel">取消订单</button>
			<button class="btn2" v-if="orderStatus==2">立即支付</button>
			<button class="btn2" v-if="orderStatus==3">申请退款</button>
			<button class="btn2" v-if="orderStatus==3">扫码结算</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: ['待评价', '已取消', '已退款', '已完成', '待支付', '待使用'],
				statusColor: ['#fd9a22', '#a4a4a4', '#a4a4a4', '#a4a4a4', '#f05a4c', '#2c99ff'],
				orderStatus: 1,
				rateValue: 5,
			}
		},
		methods: {
			complete(e) {
				if (e.success) {
					console.log('生成成功');
				} else {
					console.log('生成失败');
				}
			},
			remake() {
				const ref = this.$refs['qr'];
				ref.remake();
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			toComment(){
				uni.navigateTo({
					url:'/pages/comment/comment'
				})
			},
			toCancel(){
				uni.showModal({
					title:'提示',
					content:'是否取消该订单？',
					success: (res) => {
						if(res.confirm){
							
						}else{
							
						}
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: white;
		padding: 0 10rpx;
	}

	.uQRCode>view:nth-child(1) {
		margin-top: 20rpx;
		text-align: center;
		font-size: 35rpx;
		font-weight: bolder;
	}

	.uQRCode>view:nth-child(2) {
		width: 400rpx;
		height: 400rpx;
		/* margin: 20rpx 175rpx; */
		margin: 20rpx calc(50vw - 200rpx);

	}


	.minTag {
		position: absolute;
		font-size: 32rpx;
		font-weight: bolder;
		right: 0;
		top: 0;
	}

	.uni-card {
		margin-bottom: 10rpx !important;
		font-weight: bolder;
	}

	.orderDetails {
		display: flex;
	}

	.orderDetails>view:nth-child(1) {
		width: 600rpx;
	}

	.line {
		width: 340px;
		background-color: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(187, 187, 187, 1);
		margin: 10rpx 0;
	}

	.bottomNav {
		background-color: white;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}

	.bottomNav>view:nth-child(1) {
		display: flex;
		width: 150rpx;
		justify-content: center;
		flex-wrap: wrap;
	}

	.bottomNav image {
		width: 50rpx;
		height: 50rpx;
	}

	.bottomNav button {
		height: 70rpx;
		line-height: 70rpx;
	}

	.btn1 {
		color: black;
		background-color: white;
		border: 1rpx solid #0184FF;
		position: absolute;
		right: 250rpx;
		top: 0;

	}

	.btn2 {
		color: white;
		background-color: #0184FF;
		position: absolute;
		right: 20rpx;
		top: 0;
	}
</style>